<template>
	<div class="playListCont">
		<div class="playList">
			<div class="playCard" v-for="(item,index) in url" :key="index" @click="chooseCard(item,index)">
				<div class="playCard-cover">
					<img :src="item.coverPic">
					<div>{{item.duration | secondToDate}}</div>
					<span class="playTip" v-show="playTipShow == item.id" :style="{color: liveInfo.labelColor}">正在播出</span>
				</div>
				<div>
					<p>{{item.title}}</p>
				</div>
			</div>
		</div>
		<div :style="{background: liveInfo.labelColor}" class="backLive" v-show="backLive" @click="changeToLive">返回直播</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		props: ["url"],
		filters: {
			secondToDate(result) {
				var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
				var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
				var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
				return result = h + ":" + m + ":" + s;
			},
		},
		computed: {
			backLive() {
				return this.$store.state.backLive; //返回直播显隐
			},
			playTipShow() {
				return this.$store.state.playTipShow; //正在播出显隐
			},
			liveInfo() {
				return this.$store.state.liveInfo;
			}
		},
		methods: {
			chooseCard(item, index) {
				this.$store.state.backLive = true;
				this.$store.state.playTipShow = item.id;
				let url = item.url;
				this.$emit("play", url);
			},
			changeToLive() {
				this.$store.state.backLive = false;
				this.$store.state.playTipShow = false;
				this.$emit("changeLive", true);
			}
		},
		created() {
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	.playListCont {
		height: 100%;
	}

	.playTip {
		font-size: 12px;
		position: absolute;
		bottom: calc(50% - 10px);
		left:  calc(50% - 24px);
	}

	.playList {
		height:100%;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content:space-between;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.playList ::-webkit-scrollbar {
		width: 0em;
	}

	.playList ::-webkit-scrollbar:horizontal {
		height: 0em;
	}

	.playList::-webkit-scrollbar {
		display: none;
	}

	.playCard {
		padding: 10px;
		width:50%;
		text-align:left;
		.playCard-cover {
			position: relative;
			overflow: hidden;
			img {
				width: 100%;
				height: 100px;
				vertical-align: middle;
			}
			div {
				position: absolute;
				padding: 2px 5px;
				width: 100%;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.6);
				color: #fff;
			}
		}

		p {
			border-top: 0;
			padding: 5px;
			word-break: break-all;
			word-wrap: break-word
		}
	}

	.backLive {
		font-size: 16px;
		position: absolute;
		cursor:pointer;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background: #000;
		color: #fff;
	}
</style>
